<template>
  <view style="height: 100vh;width: 100vw;">
	<movable />
    <swiper
      class="home-swiper"
      vertical="true"
      @change="onSwiperChange"
    >
      <swiper-item style="height: 100vh;width: 100vw;">
        <view class="home-content-item-1">
          <yunluguzhen />
        </view>
      </swiper-item>
      <swiper-item class="home-content-item">
        <image src="https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png" class="home-bj"></image>
        <view class="home-content-item-2" v-show="showContents.includes(1)">
          <yunshangzhanguan />
        </view>
      </swiper-item>
      <swiper-item class="home-content-item">
        <image src="https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png" class="home-bj"></image>
        <view class="home-content-item-3" v-show="showContents.includes(2)">
          <gongyijiaoyu ref="gongyijiaoyuComp" />
        </view>
      </swiper-item>
	  <swiper-item class="home-content-item">
	    <image src="https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png" class="home-bj"></image>
	    <view class="home-content-item-4" v-show="showContents.includes(3)">
	      <tesewuchan />
	    </view>
	  </swiper-item>
	  <swiper-item class="home-content-item">
	    <image src="https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png" class="home-bj"></image>
	    <view class="home-content-item-5" v-show="showContents.includes(4)">
	      <liuyanqian />
	    </view>
	  </swiper-item>
	  <swiper-item class="home-content-item">
	    <image src="https://xnlv-test.lizxx.com/image/xnlv/static/yunzhanguan/yunzhanguanimage-49603.png" class="home-bj"></image>
	    <view class="home-content-item-6" v-show="showContents.includes(5)">
	      <daolan ref="daolanComp" />
	    </view>
	  </swiper-item>
    </swiper>
  </view>
</template>

<script>
import yunluguzhen from '../index/index.vue'
import yunshangzhanguan from '../../pages-online-cloud/cloud-exhibition-hall/cloud exhibition hall.vue'
import gongyijiaoyu from '../../pages-public-welfare/public-welfare-education.vue'
import tesewuchan from '../../pages-special-local/special local products.vue'
import liuyanqian from '../../pages-message-wall/message wall.vue'
import daolan from '../../pages-guide/guide.vue'
export default {
  components: {
    yunluguzhen,
    yunshangzhanguan,
    gongyijiaoyu,
	tesewuchan,
	liuyanqian,
	daolan
  },
  data() {
    return {
      currentIndex: 0,  // 初始化为第一个轮播项为当前显示
      showContents: [0],  // 初始时第一个内容项已经显示
      showImage: false,
      showImage2: false
    };
  },
 methods: {
   onSwiperChange(e) {
     this.currentIndex = e.detail.current;  // 更新当前显示的轮播项索引
     if (!this.showContents.includes(this.currentIndex)) {
       this.showContents.push(this.currentIndex);  // 如果该内容项尚未显示过，则添加到数组中
     }
     // 当滑动到第三个内容组件时，执行动画
     if (this.currentIndex === 2) {
       if (this.$refs.gongyijiaoyuComp) {
         this.$refs.gongyijiaoyuComp.triggerAnimation();
       }
     }
     // 当滑动到第六个内容组件时，执行动画
     if (this.currentIndex === 5) {
       if (this.$refs.daolanComp) {  // 确保你有在<daolan />组件上设置ref="daolanComp"
         this.$refs.daolanComp.triggerAnimation();
       }
     }
   },
 }
}
</script>

<style>
.home-swiper {
    height: 100vh; 
	width: 100vw;
  }
.home-content-item-1,.home-content-item-2,.home-content-item-3,.home-content-item-4.home-content-item-5 {
    height: 100vh;
	width: 100vw;
  }
  
.home-content-item{
	height: 100vh;
	width: 100vw;
	background-color: #E4EBE9;
    
 }
 .home-bj{
	 position: absolute;
	 z-index: -2;
	 width: 100vw;
	 height: 100vh;
 }
  /* 根据需要添加更多样式 */
</style>